<template>
  <div>
    <p class="title">主题管理</p>

    <div class="container">
      <el-table :data="tableData" border>
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="theme_name" label="主题">
          <!-- <router-link
            slot-scope="scope"
            :to="`/personList?theme_id=${scope.row.theme_id}`"
            >{{ scope.row.theme_name }}</router-link
          > -->
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope" class="btnContainer">
            <el-button
              class="btn"
              type="primary"
              size="small"
              @click="tpQrCode(scope.row)"
              >生成二维码</el-button
            >
            <el-button
              class="btn"
              type="primary"
              size="small"
              @click="calcScore(scope.row)"
              >计算打分结果</el-button
            >
            <router-link :to="`/scoreList?theme_id=${scope.row.theme_id}`">
              <el-button class="btn" type="primary" size="small"
                >查看打分结果</el-button
              >
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="二维码" :visible.sync="dialogVisible" width="500px">
        <img width="100%" :src="qrCodeSrc" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'theme',
  data() {
    return {
      dialogVisible: false,
      qrCodeSrc: '',
      pageNum: 1,
      pageSize: 1000,
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList(pageNum = this.pageNum) {
      const res = await this.$Request({
        url: `/theme/list/${pageNum}/${this.pageSize}`,
      });
      this.tableData = res.body || [];
    },
    async tpQrCode(row) {
      const res = await this.$Request({
        url: `/theme/qrcode/${row.theme_id}`,
        responseType: 'blob',
      });
      // ie10+
      let blob= new Blob([res]),
      name=row.theme_name+'.jpg'
      if (navigator.msSaveBlob) {
        return navigator.msSaveBlob(blob, name);
      } else {
        var link = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = link;
        a.download = name;
        a.click();
      }
      //   this.qrCodeSrc = window.URL.createObjectURL(new Blob([res]));
      //   this.qrCodeSrc =res || 'http://211.149.146.68:7009/scoring/v1/theme/qrcode/6';
      //   this.dialogVisible = true;
    },
    async calcScore(row) {
      const res = await this.$Request({
        url: `/theme/fraction/calculation/${row.theme_id}`,
      });
      this.$message.success('计算完成');
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 20px;
  font-weight: bold;
  line-height: 2;
  text-align: left;
  margin-bottom: 20px;
  margin-top: 40px;
  margin-left: 40px;
}
.container {
  width: calc(100% - 80px);
  margin: 0 40px;
}
.btnContainer {
  text-align: center;
}
.btn {
  margin: 0 20px;
}
.search {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 120px;
  background-color: #fff;
  border: 1px solid #999;
  z-index: 999;
  position: fixed;
  bottom: 60px;
  right: 60px;
}
.search i {
  font-size: 25px;
}
</style>
